<template>
  <div>
    <div id="myChart" :style="{width: '100%', height: '300px', padding: '0 10px',boxSizing: 'border-box'}"></div>
  </div>
</template>

<script>
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/line')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted () {
    this.drawLine()
  },
  methods: {
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        title: { text: '销量(万)' },
        tooltip: {},
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['11日', '12日', '13日', '14日', '15日', '16日', '17日'],
          axisLine: {
            lineStyle: {
              color: '#e3e3e3' // 坐标轴线颜色
            }
          },
          axisLabel: {
            textStyle: {
              color: '#999'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#e3e3e3' // 坐标轴线颜色
            }
          },
          axisLabel: {
            textStyle: {
              color: '#999'
            }
          }
        },
        label: {
          normal: {
            show: true,
            textStyle: {color: '#000', fontSize: '18'},
            position: 'top'
          }
        },
        series: [{
          data: [100, 200, 400, 300, 500, 500, 500],
          type: 'line',
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#ffb900' }, {offset: 1, color: '#fff'}], false)},
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#ff8300'
              }
            }
          }
        }]
      })
    }
  }
}
</script>

<style scoped>
</style>
